<template>
	<div class="cus-main">
		<div class="cus-bg"></div>
		<div class="pro-info">
			<div class="pro-code">
				<div class="pro-img">					
					<img class="img-item" :src="imgUrl" />
				</div>
			</div>
			<div class="pro-sub">
				<a @click="goto"><van-btn text="客服QQ群" type="1" /></a>
			</div>
		</div>
	</div>
</template>

<script>
	import vanBtn from '../../common/vanBtn';
	export default {
		components: {
			vanBtn
		},
		data() {
			return {
				imgUrl: `${this.$store.state.qualifyQuery.siteUrl}storage/kefu/wx.jpg`
			}
		},
		methods: {
			goto(){
				window.location.href = `http://6677.qwmazuj.cn/storage/kefu/qq.jpg`
			}
		}
	}
</script>

<style lang="less" scoped>
	.cus-main{
		height: 100vh;
		background: #F2F2F2;
		.cus-bg{
			background: #FDDFAA;
			height: 400px;
		}
		.pro-info{
			position: absolute;
			left: 6%;
			right: 6%;
			top: 50%;
			margin: -500px auto;
			padding: 9% 5%;
			border-radius: 32px;
			z-index: 9;
			height: 1000px;
			text-align: center;
			background: url(../../../assets/images/icon_cus_bg.png) no-repeat;
			background-size: 100%;
			.pro-sub{
				margin: 45% 14% 0 14%;
				height: 400px;
				h3{
					padding-top: 15%;
					font-weight: 500;
					font-size: 36px;
					padding-bottom: 4%;
				}
				>p{
					line-height: 50px;
					font-size: 28px;
				}
			}
			.pro-code{
				padding: 0 10%;
				.pro-img{
					width: 300px;
					padding-top: 20px;
					position: relative;
					margin: 0 auto;
					.img-item{
						width: 300px;
						height: 300px;
					}
				}
			}
		}
	}
	
</style>
